<template>
  <div>
      <keep-alive>
          <!-- 被keep-alive 包裹的子组件会被缓存 -->
          <!-- keep-alive 被他包裹的组件 会被缓存 缓存后vue 实例不会销毁 -->

          <!-- <component :is="组件的名字"></component> -->
          <component :is="test"></component>
          <!-- 可以实现动态的加载组件 -->
          <button @click="fun">下一个</button>
      </keep-alive>
  </div>
</template>

<script>
import BroOne from '../components/BroOne.vue'
import BroTwo from '../components/BroTwo.vue'
export default {
    name:"keepView",
    data(){
        return{
            test:'BroOne',
            current:0,
            arr:['BroOne','BroTwo']
        }
    },
    components:{
        BroOne,
        BroTwo
    },
    methods:{
        fun(){
            this.current+=1;
            this.test = this.arr[this.current];
        }
    },
    // activated 生命周期
    // deactivated

}
</script>

<style>

</style>